<template>
    <div class="app-page">
        <div class="app-container">
            <router-view></router-view>
        </div>
    </div>
    <Help />
</template>
<script setup>
import { onMounted } from 'vue'
import autofit from 'autofit.js'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import Help from './layout/component/Help.vue'
import encrypt from '@/utils/encrypt.js'
import { thirdLoginApi, getUserInfoApi } from '@/api/login'
import { ElMessage } from 'element-plus'
const userStore = useUserStore()
const router = useRouter()
const getGoogleAuthParams = () => {
    // Get the current URL
    const url = window.location.href

    // Create URL object to parse parameters
    const urlObj = new URL(url)

    // Get search params and hash params
    const searchParams = new URLSearchParams(urlObj.search)
    const hashParams = new URLSearchParams(urlObj.hash.split('?')[1] || '')

    // Combine all params into an object
    const params = {}

    // Add search params
    for (const [key, value] of searchParams.entries()) {
        params[key] = value
    }

    // Add hash params
    for (const [key, value] of hashParams.entries()) {
        params[key] = value
    }

    return params
}

onMounted(() => {
    const params = getGoogleAuthParams()
    // Exchange authorization code for tokens
    if (JSON.stringify(params) != '{}') {
        thirdLoginApi({ code: params.code }).then(res => {
            if (res.code == 200) {
                encrypt.SetLocalData('accessToken', res.data.accessToken)
                encrypt.SetLocalData('refreshToken', res.data.refreshToken)
                
                getUserInfoApi({}).then(res => {
                    if(res.code == 200){
                        encrypt.SetLocalData('userInfo', res.data)
                        ElMessage.success('登录成功')
                        window.location.href = "/#/home"
                    }
                })
            
            }else if(res.code == '10031'){
                ElMessage.error('密码错误')
            }else if(res.code == '10032'){
                ElMessage.error('用户不存在')
            }
        })
    }
    autofit.init({
        dh: 1080,
        dw: 1920,
        el: 'body',
        resize: true,
        ignore: ['div[id*="el-popper-container"]', 'div[id*="el-dialog__wrapper"]', 'div[class*="el-overlay"]']
    })
})
</script>
<style lang="scss">
body,
html,
#app {
    background: #fff7ed;
}

.app-page {
    width: 100%;
    height: 100%;
    color: #fff;

    .app-container {
        width: 100%;
        height: 100%;
    }
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
